<template>
  <div class="feedback-page">
    <Back title="意见反馈" />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          name="type"
          label="反馈类型"
          :rules="[{ required: true, message: '请选择反馈类型' }]"
        >
          <template #input>
            <van-radio-group v-model="formData.type" direction="horizontal">
              <van-radio name="1">功能建议</van-radio>
              <van-radio name="2">界面问题</van-radio>
              <van-radio name="3">其他</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
          v-model="formData.content"
          rows="5"
          autosize
          label="详细描述"
          type="textarea"
          placeholder="请详细描述您遇到的问题或建议"
          :rules="[{ required: true, message: '请输入反馈内容' }]"
        />

        <van-field
          v-model="formData.contact"
          label="联系方式"
          placeholder="请输入手机/邮箱（选填）"
        />
      </van-cell-group>

      <div style="margin: 16px;">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          :loading="submitting"
        >
          提交反馈
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showSuccessToast, showFailToast } from 'vant';
import http from '../http/index.js';
import Back from '../utils/Back.vue';
const router = useRouter();
const submitting = ref(false);
const formData = ref({
  type: '1',
  content: '',
  contact: ''
});

const onSubmit = async () => {
  try {
    submitting.value = true;
    const response = await http.post('/feedback/', formData.value);
    
    if (response.data.code === 200) {
      showSuccessToast('提交成功');
      router.go(-1);
    } else {
      showFailToast(response.data.msg || '提交失败');
    }
  } catch (error) {
    showFailToast('网络请求异常');
  } finally {
    submitting.value = false;
  }
};
</script>

<style scoped>
.feedback-page {
  padding: 16px;
}
</style>